Si pasas el puntero sobre la siguiente imagen verás que se puede ampliar a su tamaño original.


El mismo efecto lo podemos añadir a un grupo de imágenes.


Esto es posible gracias a un script proporcionado por Dynamic Drive, Los pasos son los siguientes, descargamos el script de Dynamic Drive expando.js y lo alojamos en el servidor que solemos usar. Luego nos dirigimos a nuestra plantilla y en Edición de HTML buscamos </head> justo antes lo añadimos de la siguiente forma:

<script src='aquí-url-del-script' type='text/javascript'/>

» Donde dice aquí-url-del-script los sustituimos por la url del script que alojamos anteriormente.

Hay otra opción y es añadir el script directamente a la plantilla, de esa forma evitaremos que el archivo deje de funcionar por problemas de alojamiento como puede ser superar la banda ancha o caídas del servidor. En este caso lo añadiremos también antes de </head> de esta forma:

<script type='text/javascript'>
//<![CDATA[
// Expando
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
im.title = '';
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};

expConIm.ims = {};

expConIm.r = new RegExp('\\bexpando\\b');

if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
//]]>
</script>

Una vez lo tenemos añadido nos situamos justo antes de ]]></b:skin> y añadimos unos estilos para el contorno de las imágenes.

img.expando{
border: none;
vertical-align: top;
}

A esos estilos le podemos añadir diferente borde del que presentan nuestras imágenes, podéis ver algunos aquí. Si preferimos el borde igual al de las imágenes de nuestras entradas buscamos donde dice:

.post img {
aquí estarán los estilos
que podemos copiar y pegar
}

Para el ejemplo añadí:

img.expando{
background:#EFEFEF;
padding:8px;
border:2px outset #F6FAF4;
vertical-align: top;
}

Cuando tenemos los estilos definidos ya está todo listo para añadir nuestra imagen, la añadimos de la siguiente forma:
<img class="expando" src="url-de-la-imagen" width="100" border="0" height="100" />

» Con height (altura) y width (anchura) escogemos el tamaño que mostrará la imagen en miniatura.

Si deseamos añadir un grupo de imágenes:
<p><img class="expando nombre-imagen" border="0" src="url-imagen-1" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-2" width="100" height="100"><img class="expando nombre-imagen" border="0" src="url-imagen-3" width="100" height="100"></p>

» Donde url-imagen-1-2-3 lo sustituimos por la url de nuestra imagen.

» En nombre-imagen podemos añadir el nombre o título de nuestra imagen, de esa forma si tenemos que hacer una modificación sabremos sobre qué imagen la estamos haciendo.

Para el efecto del grupo de imágenes debemos tener especial cuidado que el tamaño real sea prudencial de no ser así tendríamos el siguiente problema.


¿Una solución? calcular que la suma de la imagen ampliada y las miniaturas no supere el width (ancho) de main-wrapper que es el espacio disponible para las entradas.

Eso es muy sencillo si consideramos que Blogger nos proporciona tres tamaños para las imágenes 200-320-400 de ser un tamaño distinto tendríamos que modificarlo con algún editor de imágenes.



AraL

Siempre nos sorprendes con cositas verdaderamente interesantes Gem@...

El problema en tus últimos post me surge con el alojamiento de los scripts...
En fin, veré como me las ingenio para encontrar donde alojarlos sin que me den error de HTML mal configurado al ghuardar la plantilla.

Gracias

Responder
danieson

Por fin encuentro a alguién que habla del scrpit expando y me entero de como usarlo, gracias.

Responder
Unknown

Hola Gema, éste también me lo apunto para probarlo. Ya tengo unos cuantos pendientes, y otros ejecutados, me gustó especialmente el tema de transparencias.

Felicidades y gracias por este magnífico blog que visito con frecuencia.

Responder
José GDF

Hola, Gema. Voy a aprovechar que me he conectado hoy desde un ordenador con Windows para saludarte, ya que normalmente lo hago desde Linux. Te hice caso y me suscribí por correo y no me pierdo ni una.

Este truco en concreto de expandir las imágenes me gusta para mi blog de fotos, voy a estudiar cómo lo adapto a mi caso. Por cierto, ¿conoces qué variable hay que modificar para el tiempo de expansión? Es decir, para que tarde más o menos tiempo en expandir. Supongo que estará dentro del propio script.

A AraL le respondo yo, si me lo permites. Desde hace poco descubrí que con mi cuenta de hotmail tengo unos 25 GB de capacidad para alojar archivos. Pues bien, he probado a subir scripts y me funciona bien. Sólo busca en más - Skydrive, dentro de tu cuenta de hotmail (si tienes una, claro).

Sólo hay que tener la precaución de eliminar de la ruta del enlace del archivo que alojes la parte final ?download, que lo obtendrás con el botón derecho "copiar la ruta del enlace" en Firefox, encima del icono del archivo, y ya está.

Así que si tienes una cuenta de hotmail, no te tienes que preocupar del alojamiento de archivos.

Responder
Jaime Trujillo Escobedo

Qué buen truco Gem@!!!!! la verdad es que es fácil y bueno :D Saludines! ;)

Responder
Raúl

Hola que tal gema ya pude cambiar el color del "Continuar Leyendo" :P.
Lo que te quiere consultar ahora es como hago que cuando presente toda la entrada no me aparezca el continuar leyendo. Al igual que cuando de click en continuar leyendo ya en la entrada completa no aparezca el continuar Leyendo Gracias: :)

Responder
Codi Global

Gema, me ha encantado el truco seguro le encuentro alguna utilidad.
Un abrazo

Responder
Anónimo

Hola Gem@.

Esto es muy exquisito. Me fascina un montón!.

Saludines :D.

Responder
Gsar Flakita

Hola Gema
como tas???
espero que bien
muy bueno el truco lo usare cuando haga wallpapers ^^
tambien he psado por aqui para dcirte que te dejado un merecido premio en mi blog, espero que te guste ^^

Responder
Gem@

AraL la plantilla no da error por añadir un script es más problable que lo de porque no lo añadimos en el lugar indicado o porque el código que añadimos no está correcto.
Yo utilizo skydrive.live.com/ pero la idea de José GDF es a tener en cuenta ;)

yz Me alegra si te fue útil Danieson ;)

yz Gracias a ti por comentar Agente Mulder :)

yz José GDF ¿qué hay de nuevo? me alegra verte por aquí y te agradezco un montón el interés en seguirme de cerca.
Tu aportación es genial y yo también la desconocía, Gracias :)

yz Saludines Jaime :)

yz Raúl ese sistema que tienes lo añade en todas las entradas no hay forma de escoger donde añadirlo ni eliminarlo. Cualquier cambio afecta a todas las entradas.

yz Hola Sisco ¡Cúanto tiempo! me alegra verte de nuevo :)

yz Todo tuyo Birdelo :)

yz Gsar Flakita estoy bien, gracias.
Agradezco ese detalle :)

Responder
ARAC

Hola Gema! felicitaciones por tu blog y por tu forma amena y sencilla de explicar, quitando el tecnicismo que me haría perder como turco en la neblina jajaja. Mirá tengo un blog en el que posteo videos en idioma extranjero y subtitulados al castellano, algunos de ellos utilizo entre 5 a 8 programas diversos y me demandan algo de 3 horas. La verdad que es un trabajo que me apasiona y me gusta mucho, pero me gustaría que el reproductor de videos del blogger se viera en otro tamaño un poco mas extenso sin tener que usar servicios externos como el youtube. Se puede agrandar el visor del reproductor?.
Ojala podás darme una solución a mi problema.
Recién te descubrí a través del google y te he agregado en mi favoritos.
Te dejo el link de mi blog: http://aracmultimedia.blogspot.com
Un caluros y afectuoso saludo y agradecido por tu atención.

Responder
Gem@

Desconozco si puede hacerse ARAC-MULTIMEDIA y ahora mismo me es imposible probar porqie no aparece el icono en mi editor de entradas :O

Responder
Marisabel

Es muy interesante Gema, pero con lo liada que estoy, mejor lo dejo para más adelante . Creo que se ha de ir pasito a pasito y este lo veo complicado.

Responder
Javier

Hola Gem@, gracias por visitar mi blog, aunque me faltan algunas cosas a rediseñar, pero al final ya me decidi a meter contenido y decirle a Marisabel que no es dificil de poner en marcha. Si quieres ver mas ejemplos de lo que es capaz (aunque Gem@, ya nos lo muestra aqui con muchos ejemplos), entra dentro de algun post de mi blog http://pisaafondo.blogspot.com/ y veras como queda la cosa.

Un saludo.

Responder
Gem@

Marisabel ya ves que Javier contesta a tu comentarios y tiene toda la razón, es muy sencillo pero entiendo que desees terminar otras cosas y tomarte tu tiempo :)

yz Gracias Javier :)

Responder
Anónimo

Woow lo acabo de implementar en mi blog y se ve genial :P

Muchas gracias por el dato!

Un saludo ;)

Responder
Gem@

Saludos Eddie gracias por comentar ;)

Responder
Kirei

Hola Gema,como estás? antes que nada quiero felicitarte por tu blog, todo es muy interesante y estoy aprendiendo cosas nuevas, instalé en mi blog el script de leer más con miniaturas y no tuve ningún problema para hacerlo gracias a tus explicaciones detalladas y recién puse en un blog de pruebas el expando y salió bárbaro.Gracias por compartir con todos lo que sabes. Saludos desde Córdoba, Argentina.

Responder
Gem@

Gracias por el comentario KIREI, me encantó ver tu blog cuya temática sale fuera de lo habitual :)

Responder
Priamo

Hola de nuevo Gema:Veras he entrado en Dynamicdrive y he pinchado para descargar el archivo expando.js y una vez guardado (por cierto no lo guarda con extension)no me abre. Que hago mal o es que pasa algo con este archivo

Responder
Gem@

Saludos Priamo, hay problemas con el servidor de los archivos la mayoría estamos de mudanza por eso no funcionan.
El archivo debes "guardarlo como.." yo he probado y se guarda con extensión js esta es la dirección del archivo:
http://www.dynamicdrive.com/dynamicindex4/expando.js

Responder
Priamo

Gema lo he guardado en Ski drive veremos que pasa.
Por ultimo se puede añadir texto y que se vea caundo se expanda.
saludos y muchas gracias.

Responder
Gem@

yz Hola Priamo no he probado a añadir texto, supuesta mente está indicado para las imágenes pero.. sería cuestión de probar añadiendo la clase "expando" voy a verlo ;)

Responder
Gem@

yz Aquí otra vez, al parecer no Priamo el scripts que usa es para imágenes :)
Siempre queda la opción de añadir una imagen con el texto impreso.

Responder
Priamo

Que le vamos hacer Gema, no obstante muchas gracias.

Responder
Gem@

yz No hay de qué Priamo :)

Responder
José GDF

Con un poco de retraso, retiro lo de Skydrive, ¡vaya chasco! :(

Responder
Gem@

yz José GDF el chasco ha sido para todos ;)

Responder
Toque de QuedA

Hola Gema, la verdad que es excelentisimo este sistema, solo que le he mostrado el blog (en construccion) todavía a varias personas y a ninguno le ha funcionado el expand, coloqué todo como dice y solo en firefox y en este ordenador que uso para programar el blog funciona, cuando porngo IE deja de funcionar y ni hablar de otros ordenadores tanto con FF como como IE, tienes idea de que puede ser?

Desde ya un saludo.

PD: El blog es este con el que estoy posteando.

Responder
Gem@

yz Toque de QuedA en tu blog lo veo todo bien menos la url del archivo js.
No sé si sabrás que Sky Drive ya no proporciona el mismo servicio de alojamiento, por lo menos para archivos js.

Mira aquí ;)

Responder
rodhouse

Gem@:

Tengo una duda con esto del expando: ¿qué quieres decir con "lo alojamos en el servidor que solemos usar"? ¿tengo que tener un espacio en un servidor?

Muchas gracias por tu ayuda y por tu Blog. Es de lo mejor que he encontrado para los que no tenemos ni idea...

Responder
Gem@

yz Saludos Rodhouse en contestación a tu pregunta he actualizado la entrada donde explico como añadir el script directamente a la plantilla ;)
(Haz una copia antes de realizar los cambios, es muy útil por si cometemos algún error)

Responder
Las cositas de Meri

Hola Gem@, me gusta mucho este efecto pero una pegunta lo más seguro tonta pero........... Esto afecta a todas las entradas del blog no?

Saludos

Responder
Millaró

Hola gema. El truco es genial, y lo explicas perfectamente. A mi me funciona bien, pero quería saber si lo puedo aplicar a una imagen de la sidebar. Lo puse como un elemento html en la sidebar, pero al agrandarse se pone por debajo de las entradas y no se ve. ¿Sabes si hay alguna solucióN?.
Un saludo.

Responder
Gem@

yz Hola Millaró, el problema es el que comento en la entrada que nos puede ocurrir por falta de espacio o imagen excesivamente grande.
Si la imagen es mayor que el espacio de la sidebar al ampliarse desplaza lo que tiene a su alrededor. En este caso siento no poder ayudarte :(

Responder
Unknown

hola gem2, no encuentro la entrada en la que explicabas cómo hacer para que las imágenes salieran a tamaño independientemente o modificando la plantilla... (o sea, sin tener que ampliar la foto en la entrada). ¿?

Responder
Gem@

yz ¿Te refieres a esta?
http://gemablog-.blogspot.com/2008/11/muchos-lo-preguntan-y-todos-lo-queremos.html

Responder
Unknown

Uyzz no, me había confundido.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top